<template>
  <van-row>
    <van-nav-bar
      title="库存"
      left-text="返回"
      left-arrow
      @click-left="$router.push('/')"
    />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-search v-model="page.query.keyword" show-action placeholder="请输入关键字查询" @search="handleSearch">
        <template #action>
          <div @click="handleSearch">搜索</div>
        </template>
      </van-search>
      <van-list
        v-model="tableLoading"
        :finished="finished"
        finished-text="没有更多了"
        @load="doPage"
      >
        <van-cell v-for="(item,index) in tableData" :key="index" is-link @click="toDetail(item)">
          <template #default>
            <div class="title">
              {{ item.productName }}
            </div>
            <div class="title right primary">
              {{ item.quantity }}{{ item.unit }}
            </div>
            <div class="desc">
              {{ item.customerName }}
            </div>
            <span class="desc">
              {{ item.productAttribute }}
            </span>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </van-row>
</template>
<script>
import { selectStockPage } from '@/api/stock'

export default {
  name: 'Produce',
  data() {
    return {
      showDetail: false,
      tableLoading: false,
      finished: false,
      tableData: [],
      refreshing: false,
      page: {
        page: 1,
        size: 10,
        total: 0,
        query: {
          keyword: ''
        }
      }
    }
  },
  mounted() {
    this.doPage()
  },
  methods: {
    doPage() {
      this.tableLoading = true
      selectStockPage(this.page).then(resp => {
        if (resp.success) {
          if (this.refreshing) {
            this.tableData = []
            this.refreshing = false
          }
          this.tableData = [...this.tableData, ...resp.data.records]
          this.page.total = resp.data.total
          this.finished = this.tableData.length >= resp.data.total
          for (let i = 0; i < resp.data.records.length; i++) {
            var tableDatum = resp.data.records[i]
            var productAttribute = tableDatum.productAttribute
            tableDatum.productAttribute = productAttribute.map(e => e.name + ':' + e.value).join(',')
            tableDatum.attribute = productAttribute.map(e => {
              if (e.name !== '长度') {
                return e.value
              } else {
                return null
              }
            }).filter(e => {
              return e !== null
            }).join('*')
          }
        }
      }).catch(() => {
        this.finished = true
      }).finally(() => {
        this.tableLoading = false
        this.page.page++
      })
    },
    handleSearch() {
      this.tableData = []
      this.page.page = 1
      this.finished = false
      this.doPage()
    },
    onRefresh() {
      this.page.page = 1
      this.resetQueryForm()
      this.doPage()
    },
    resetQueryForm() {
      this.page.query.keyword = ''
    },
    toDetail(row) {
      this.showDetail = true
      this.$nextTick(() => {
        this.$refs.detailModule.init(row.id)
      })
    },
    handleClose() {
      this.showDetail = false
    }
  }
}
</script>

<style scoped>

</style>
